<template>
  <div class="detail-dialog-container">
    <div class="detail-dialog dialogHeaderFont">
      <el-dialog title="渠道监控详情"
                 :visible.sync="visible"
                 @close="$emit('update:showdialog', false)">
        <div class="detail-dialog-content">
          <div class="detail-dialog-item" v-show="prodCtrolStateInfo.shopNumber">
            <div class="item-part">
              渠道编号：
            </div>
            <div class="item-part setColor" v-text="prodCtrolStateInfo.shopNumber">
            </div>
          </div>
          <div class="detail-dialog-item">
            <div class="item-part">
              渠道名称：
            </div>
            <div class="item-part setColor" v-text="prodCtrolStateInfo.showName">
            </div>
          </div>
          <div class="detail-dialog-item" v-show="prodCtrolStateInfo.region">
            <div class="item-part">
              所属地区：
            </div>
            <div class="item-part setColor" v-text="prodCtrolStateInfo.region">
            </div>
          </div>
          <div class="detail-dialog-item" v-show="prodCtrolStateInfo.province">
            <div class="item-part">
              所属省份：
            </div>
            <div class="item-part setColor" v-text="prodCtrolStateInfo.province">
            </div>
          </div>
          <div class="detail-dialog-item" v-show="prodCtrolStateInfo.city">
            <div class="item-part">
              所属城市：
            </div>
            <div class="item-part setColor" v-text="prodCtrolStateInfo.city">
            </div>
          </div>
          <div class="detail-dialog-item">
            <div class="item-part">
              监控指标：
            </div>
            <div class="item-part setColor" v-text="prodCtrolStateInfo.monitoringIndex">
            </div>
          </div>
          <div class="detail-dialog-item">
            <div class="item-part">
              监控周期：
            </div>
            <div class="item-part setColor" v-text="prodCtrolStateInfo.monitoringCycle">
            </div>
          </div>
          <div class="detail-dialog-item">
            <div class="item-part">
              监控异常时段：
            </div>
            <div class="item-part setColor" v-text="prodCtrolStateInfo.monitorTimerange">
            </div>
          </div>
          <div class="detail-dialog-item">
            <div class="item-part">
              指标值：
            </div>
            <div class="item-part setColor" v-text="prodCtrolStateInfo.monitor">
            </div>
          </div>
          <div class="detail-dialog-item">
            <div class="item-part">
              预警值：
            </div>
            <div class="item-part setColor" v-text="prodCtrolStateInfo.indexValue">
            </div>
          </div>
          <div class="detail-dialog-item">
            <div class="item-part">
              预警差值：
            </div>
            <div class="item-part setColor" v-text="prodCtrolStateInfo.dValue">
            </div>
          </div>
          <div class="detail-dialog-item">
            <div class="item-part">
              差值比：
            </div>
            <div class="item-part setColor" v-text="prodCtrolStateInfo.differenceRatio">
            </div>
          </div>
          <div class="detail-dialog-item">
            <div class="item-part">
              预警时间：
            </div>
            <div class="item-part setColor" v-text="prodCtrolStateInfo.monitorTime">
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
      name: "detail-dialog",
      props: {
        showdialog: {
          type: Boolean,
          default: false
        }
      },
      computed:{
        ...mapGetters(["prodCtrolStateInfo"])
      },
      data() {
          return {
            visible: this.showdialog
          }
      },
      mounted() {
      },
      methods: {},
      watch: {
        showdialog(val){
          this.visible = val
        }
      }
  }
</script>

<style scoped>
  /**
    * @desc: This is Note
    * 详情Dialog
    * @author: WJ
    * @date: 2018/09/26 10:49:21
    **/
  .detail-dialog-content{
    background: white;
    padding: 5px 12px;
    border-radius: 4px;
  }
  .detail-dialog-item{
    display: flex;
    height: 30px;
    line-height: 30px;
    align-items: center;
  }
  .setColor{
    font-weight: 600;
  }
</style>
